<template>
<u-popup v-model="show" mode="bottom" :border-radius="15">
    <view class="select_medicine_cp">
        <view class="title">
            请选择药品
        </view>
        <view class="container">
            <view class="find">
                <u-input 
                    v-model="findData" 
                    placeholder="请输入药品名"/>
                <u-button
                    type="primary" 
                    @click="getData"
                    :loading="loading">
                    查询
                </u-button>
            </view>
            <u-table>
                <u-tr>
                    <u-th>药品名称</u-th>
                    <u-th>规格</u-th>
                    <u-th>剂型</u-th>
                    <u-th>功效</u-th>
                </u-tr>
                <scroll-view
                    :scroll-y="true"
                    :show-scrollbar="true"
                    class="table_container">
                    <u-tr 
                        v-for="(item,index) in dataList" 
                        :key="index"
                        @click.native="selectMedicine(item)">
                        <u-td>{{item.Dname}}</u-td>
                        <u-td>{{item.Dtype}}</u-td>
                        <u-td>{{item.DjiXing}}</u-td>
                        <u-td>{{
                            item.Efficay.length>10?
                                item.Efficay.substr(0,10)+'...':item.Efficay
                        }}</u-td>
                    </u-tr>
                </scroll-view>
            </u-table>
        </view>
    </view>
</u-popup>
</template>

<script>
//药品选择组件
import {findDrugs} from "@/common/api"
export default {
    data() {
        return {
            loading:false,  //查询加载状态
            show: false,
            dataList:[],
            findData:"",  //根据药品名查询药品
        }
    },
    methods:{
        setShowState(state){ //设置组件是否显示（外部调用）
            this.show = !!state;
            if(this.show && this.dataList.length === 0) this.getData();
        },
        selectMedicine(item){ //药品选择后抛出
            this.$emit("onSelect",item);
            this.setShowState(false);
        },
        getData(){ //从后端获取数据
            this.loading = true;
            findDrugs(
                {
                    dname:this.findData,
                },
            ).then(data=>{
                this.dataList= data;
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.select_medicine_cp {
    text-align: center;
    height: fit-content;
    .title{
        width: 100%;
        font-size: 30rpx;
        color: #000000;
        font-weight: bold;
        margin-bottom: 25rpx;
        background-color: #ffffff;
        padding: 25rpx 0;
        box-sizing: border-box;
        text-align: center;
        border-bottom: 1px solid #e4ebec;
    }
    .container{
        padding: 0 25rpx;
        .find{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .u-input{
                width: 100%;
                margin-right: 25rpx;
                border: 1px solid #e4ebef;
                height: 100%;
                border-radius: 2px;
                padding: 2.5px 10px;
            }
        }
        .u-table{
            margin: 25rpx 0;
        }
        .table_container{
            max-height: 40vh;
        }
    }
}
</style>
